<script setup>
import { ref, onMounted } from 'vue'
import { getCurrentInstance } from 'vue'

// 获取全局属性中的Socket实例
const { proxy } = getCurrentInstance()
const socket = proxy.$socket

// 家庭成员数据
const familyMembers = ref([])
const newMember = ref({
  name: '',
  id: '',
  role: ''
})
const errorMessage = ref('')
const successMessage = ref('')

// 获取家庭成员列表
const getFamilyMembers = async () => {
  try {
    const response = await fetch('http://localhost:3000/api/family-members')
    if (!response.ok) throw new Error('Failed to fetch family members')
    familyMembers.value = await response.json()
  } catch (error) {
    errorMessage.value = error.message
    setTimeout(() => errorMessage.value = '', 3000)
  }
}

// 添加新家庭成员
const addFamilyMember = async () => {
  try {
    if (!newMember.value.name || !newMember.value.id || !newMember.value.role) {
      throw new Error('All fields are required')
    }

    const response = await fetch('http://localhost:3000/api/family-members', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newMember.value)
    })

    if (!response.ok) throw new Error('Failed to add family member')

    const addedMember = await response.json()
    familyMembers.value.push(addedMember)

    // 重置表单
    newMember.value = {
      name: '',
      id: '',
      role: ''
    }

    successMessage.value = 'Family member added successfully'
    setTimeout(() => successMessage.value = '', 3000)
  } catch (error) {
    errorMessage.value = error.message
    setTimeout(() => errorMessage.value = '', 3000)
  }
}

// 生命周期钩子：组件挂载时获取家庭成员列表
onMounted(() => {
  getFamilyMembers()
})
</script>

<template>
  <div class="family-member-management">
    <h2>Family Member Management</h2>

    <!-- 错误提示 -->
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>

    <!-- 成功提示 -->
    <div v-if="successMessage" class="success-message">{{ successMessage }}</div>

    <!-- 添加新成员表单 -->
    <div class="add-member-form">
      <h3>Add New Family Member</h3>
      <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" v-model="newMember.name" placeholder="Enter name">
      </div>
      <div class="form-group">
        <label for="id">ID:</label>
        <input type="text" id="id" v-model="newMember.id" placeholder="Enter ID">
      </div>
      <div class="form-group">
        <label for="role">Role:</label>
        <input type="text" id="role" v-model="newMember.role" placeholder="Enter role">
      </div>
      <button @click="addFamilyMember">Add Member</button>
    </div>

    <!-- 家庭成员列表 -->
    <div class="member-list">
      <h3>Family Members</h3>
      <ul v-if="familyMembers.length > 0">
        <li v-for="member in familyMembers" :key="member._id">
          <div>Name: {{ member.name }}</div>
          <div>ID: {{ member.id }}</div>
          <div>Role: {{ member.role }}</div>
        </li>
      </ul>
      <p v-else>No family members found</p>
    </div>
  </div>
</template>

<style scoped>
.family-member-management {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h2 {
  color: #333;
  border-bottom: 2px solid #42b983;
  padding-bottom: 10px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3aa876;
}

.member-list {
  margin-top: 30px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #f9f9f9;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  border-left: 4px solid #42b983;
}

error-message {
  color: #ff4444;
  background-color: #ffeeee;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}

success-message {
  color: #00c851;
  background-color: #e6ffed;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}
</style>